<template>
  <el-dialog :title="!this.dataList[0].propId ? this.$i18n.t('crud.addTitle') : this.$i18n.t('temp.modify')"
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-table :data="dataList"
              border
              size="medium"
              style="width: 100%;">
      <el-table-column prop="propName"
                       header-align="center"
                       align="center"
                       :label="$t('product.attributeName')">
        <template slot-scope="scope">
          <el-input :placeholder="$t('product.content')"
                    v-model="scope.row.propName"
                    clearable
                    maxlength="20"
                    show-word-limit></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="propNameEn"
                       header-align="center"
                       align="center"
                       :label="$t('product.attributeNameEn')">
        <template slot-scope="scope">
          <el-input :placeholder="$t('product.content')"
                    v-model="scope.row.propNameEn"
                    clearable
                    maxlength="20"
                    show-word-limit></el-input>
        </template>
      </el-table-column>
      <!--<el-table-column prop="prodPropValues"-->
                       <!--header-align="center"-->
                       <!--align="center"-->
                       <!--:label="$t('product.attributeValue')">-->
        <!--<template slot-scope="scope">-->
          <!---->
          <!--<el-col :span="12"-->
                  <!--v-for="item in scope.row.prodPropValues"-->
                  <!--:key="item.valueId">-->
            <!--<el-input :placeholder="$t('product.content')"-->
                      <!--v-model="item.propValue"-->
                      <!--@clear="clearProdPropValues"-->
                      <!--maxlength=20-->
                      <!--clearable></el-input>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->

          <!--</el-col>-->
          <!--<el-col :span="4">-->
            <!--<el-button type="primary"-->
                       <!--icon="el-icon-circle-plus"-->
                       <!--@click="addInput()"></el-button>-->
          <!--</el-col>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <el-table :data="prodPropValuesData" max-height="500px">
      <el-table-column
        prop="propValue"
        :label="this.$i18n.t('product.attributeValue')"
        align="center"
        min-width="40%"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-input size="small" maxlength="20" clearable v-model="prodPropValuesData[scope.$index].propValue"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        min-width="40%"
        show-overflow-tooltip
        prop="propValueEn"
        :label="this.$i18n.t('product.attributeValueEn')"
      >
        <template slot-scope="scope">
          <el-input clearable size="small" maxlength="20" v-model="prodPropValuesData[scope.$index].propValueEn"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="change"
        :label="this.$i18n.t('text.menu')"
        align="center"
        min-width="20%"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.$index === 0" @click="add" circle el-icon-plus>添加</el-button> -->
          <el-button
            size="small"
            v-if="scope.$index === 0"
            @click="add"
            type="primary"
            icon="el-icon-plus"
            circle
          ></el-button>
          <el-button
            size="small"
            v-if="scope.$index > 0"
            @click="deleteRow(scope.$index)"
            type="danger"
            icon="el-icon-close"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
      <el-button type="primary"
                 @click="dataFormSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      dataList: [{ propId: 0, propName: '', propNameEn: '', prodPropValues: [{ valueId: 0 }] }],
      dataRule: {
        propName: [
          { required: true, message: this.$i18n.t('product.attributeNameNoNull'), trigger: 'blur' }
        ]
      },
      prodPropValuesData: [{valueId: 0, propValue: '', propValueEn: ''}],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
    }
  },
  methods: {
    init (val) {
      if (val) {
        this.dataList = [JSON.parse(JSON.stringify(val))]
        this.prodPropValuesData = this.dataList[0].prodPropValues
      } else {
        this.dataList = [
          { propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }
        ]
        this.prodPropValuesData = [{valueId: 0, propValue: '', propValueEn: ''}]
      }
      this.visible = true
    },
    // 表单提交
    dataFormSubmit () {
      let temp = []
      if (this.prodPropValuesData) {
        for (const key in this.prodPropValuesData) {
          if (this.prodPropValuesData.hasOwnProperty(key)) {
            const element = this.prodPropValuesData[key]
            if (element.propValue) {
              temp.push(this.prodPropValuesData[key])
            }
          }
        }
      }
      // if (this.dataList[0].prodPropValues) {
      //   for (const key in this.dataList[0].prodPropValues) {
      //     if (this.dataList[0].prodPropValues.hasOwnProperty(key)) {
      //       const element = this.dataList[0].prodPropValues[key]
      //       if (element.propValue) {
      //         temp.push(this.dataList[0].prodPropValues[key])
      //       }
      //     }
      //   }
      // }
      // 判断是否有相同的属性值
      let prodPropValues = this.prodPropValuesData
      // let prodPropValues = this.dataList[0].prodPropValues
      if (prodPropValues) {
        for (let i = 0; i < prodPropValues.length; i++) {
          if (!prodPropValues[i].propValue) {
            // this.prodPropValuesData.splice(i, 1)
            this.$message.error(this.$i18n.t('product.specTip').replace('N', i + 1))
            return
          }
          if (prodPropValues[i].propValueEn === '' || prodPropValues[i].propValueEn === null || prodPropValues[i].propValueEn === undefined) {
            // this.prodPropValuesData.splice(i, 1)
            this.$message.error(this.$i18n.t('product.specTip').replace('N', i + 1))
            return
          }
          for (let j = i + 1; j < prodPropValues.length; j++) {
            if (prodPropValues[i].propValue === prodPropValues[j].propValue) {
              this.$message.error(this.$i18n.t('product.same'))
              return
            }
            if (prodPropValues[i].propValueEn === prodPropValues[j].propValueEn) {
              this.$message.error(this.$i18n.t('product.same'))
              return
            }
          }
        }
      }
      if (!this.dataList[0].propName) {
        this.$message.error(this.$i18n.t('product.attributeNameNoNull'))
        return
      }
      if (!this.dataList[0].propNameEn) {
        this.$message.error(this.$i18n.t('product.attributeNameEnNoNull'))
        return
      }
      if (temp.length < 1) {
        this.$message.error(this.$i18n.t('product.specificationy'))
        return
      }
      this.$http({
        url: this.$http.adornUrl(`/prod/spec`),
        method: this.dataList[0].propId ? 'put' : 'post',
        data: this.$http.adornData({
          propId: this.dataList[0].propId || undefined,
          propName: this.dataList[0].propName,
          propNameEn: this.dataList[0].propNameEn,
          prodPropValues: this.prodPropValuesData
        })
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.visible = false
            this.$emit('refreshDataList', this.page)
          }
        })
      })
    },
    clearProdPropValues () {
      if (this.dataList[0].prodPropValues.length === 1) {
        return
      }
      for (let i = 0; i < this.dataList[0].prodPropValues.length; i++) {
        const element = this.dataList[0].prodPropValues[i]
        if (!element.propValue) {
          this.dataList[0].prodPropValues.splice(i, 1)
        }
      }
    },
    addInput () {
      let temp = this.dataList[0].prodPropValues
      if (temp[temp.length - 1].propValue) {
        temp.push({})
      } else {
        this.$message.error(this.$i18n.t('product.pleaseEntValue'))
      }
    },
    /**
     * 添加一行规格
     */
    add () {
      let temp = this.prodPropValuesData[this.prodPropValuesData.length - 1]
      if (temp.propValue && temp.propValueEn) {
        this.prodPropValuesData.push({ propValue: '', propValueEn: '' })
      }
    },
    /**
     * 删除一行规格
     */
    deleteRow (index) {
      this.prodPropValuesData.splice(index, 1)
    }
  }
}
</script>
